@import url(../utils/utils.css);

@set hyperlink-editor {

  :root {
    aspect: Callout(bordercolor:#bbb, 
                    shadowcolor:rgba(0,0,0,0.6),
                    shadowblur:2dip,
                    shadowx:1dip,
                    shadowy:2dip,
                    backcolor:color(info-color)) url(widgets.tis);
    prototype: HyperlinkEditor url(widgets.tis);

    width:max-content;
    height:max-content;
    background: transparent;
    padding:20dip;  // to accomodate blur
    margin-top:-10dip; // related to padding above
    cursor:default;
  }

  :root > form {
    padding: 6dip;
    flow: grid(1 2,
               3 4,
               5 6,
               7 7);  
    border-spacing:6dip;
    width:max-content;
    height:max-content;    
  }

  :root > form > input { width:16em; padding-right:1.6em; }
  :root > form > input:invalid {
    background-image: url(path:M51.9,64.6v-5.8c0-0.3-0.1-0.5-0.3-0.7c-0.2-0.2-0.4-0.3-0.7-0.3h-5.9c-0.3,0-0.5,0.1-0.7,0.3   c-0.2,0.2-0.3,0.4-0.3,0.7v5.8c0,0.3,0.1,0.5,0.3,0.7c0.2,0.2,0.4,0.3,0.7,0.3h5.9c0.3,0,0.5-0.1,0.7-0.3   C51.8,65.2,51.9,64.9,51.9,64.6z M51.9,53.2l0.6-14.1c0-0.2-0.1-0.4-0.3-0.6c-0.3-0.2-0.5-0.3-0.7-0.3h-6.7c-0.2,0-0.5,0.1-0.7,0.3   c-0.2,0.1-0.3,0.4-0.3,0.6l0.5,14c0,0.2,0.1,0.4,0.3,0.5c0.2,0.1,0.4,0.2,0.7,0.2h5.7c0.3,0,0.5-0.1,0.7-0.2S51.8,53.4,51.9,53.2z    M51.4,24.5L75,67.7c0.7,1.3,0.7,2.6-0.1,3.9c-0.3,0.6-0.8,1.1-1.4,1.4c-0.6,0.3-1.3,0.5-1.9,0.5H24.5c-0.7,0-1.3-0.2-1.9-0.5   s-1.1-0.8-1.4-1.4c-0.8-1.3-0.8-2.6-0.1-3.9l23.5-43.2c0.3-0.6,0.8-1.1,1.4-1.5c0.6-0.4,1.3-0.6,2-0.6s1.4,0.2,2,0.6   C50.6,23.4,51.1,23.9,51.4,24.5z);
    background-size:1em;
    background-repeat:no-repeat;
    background-position-top:50%;
    background-position-right:0.2em;
    fill:#DC143C;
    stroke:none;
  }

  :root > form > input(url) {
    prototype: Hyperlink url(widgets.tis);
  }

  :root > form > button(apply) {
    style-set:std-toolbar-button;
    display:inline-block;
    padding:0;
    width:2em;
    height:*;
    background-image:url(path:M22,14c0,1.436-1.336,4-4,4h-3.586l1.793,1.793c0.391,0.391,0.391,1.023,0,1.414 C16.012,21.402,15.756,21.5,15.5,21.5s-0.512-0.098-0.707-0.293l-3.5-3.5c-0.391-0.391-0.391-1.023,0-1.414l3.5-3.5 c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414L14.414,16H18c1.398,0,2-1.518,2-2v-2c0-0.553,0.447-1,1-1s1,0.447,1,1V14z);
    background-position:50% 50%;
    background-repeat:no-repeat;
    background-size:0.8em;
    stroke:none;
  }

  :root > form > button(check) {
    display:inline-block;
    padding:0;
    width:2em;
    height:*;
    background-image:url(path:M 12.3125 0 C 10.4265 0.002 10.5675 0.506 11.5625 1.5 L 14.78125 4.71875 L 9.25 10.25 C 8.105 11.394 8.106 13.232 9.25 14.375 L 11.6875 16.78125 C 12.8315 17.92225 14.6685 17.92425 15.8125 16.78125 L 21.34375 11.28125 L 24.5 14.4375 C 25.601 15.5375 26 15.5735 26 13.6875 L 26 3.40625 C 25.999 -0.03075 26.03675 -0.001 22.59375 0 L 12.3125 0 z M 4.875 5 C 2.182 5 0 7.182 0 9.875 L 0 21.125 C 0 23.818 2.182 26 4.875 26 L 16.125 26 C 18.818 26 21 23.818 21 21.125 L 21 14.75 L 18 17.75 L 18 21.125 C 18 22.159 17.159 23 16.125 23 L 4.875 23 C 3.841 23 3 22.159 3 21.125 L 3 9.875 C 3 8.841 3.841 8 4.875 8 L 8.3125 8 L 11.3125 5 L 4.875 5 z);
    background-position:50% 50%;
    background-repeat:no-repeat;
    background-size:0.8em;
    stroke:none;
  }

  :root > form > button(remove) {
    display:inline-block;    
    background-image: url(path:M304.083 405.907c4.686 4.686 4.686 12.284 0 16.971l-44.674 44.674c-59.263 59.262-155.693 59.266-214.961 0-59.264-59.265-59.264-155.696 0-214.96l44.675-44.675c4.686-4.686 12.284-4.686 16.971 0l39.598 39.598c4.686 4.686 4.686 12.284 0 16.971l-44.675 44.674c-28.072 28.073-28.072 73.75 0 101.823 28.072 28.072 73.75 28.073 101.824 0l44.674-44.674c4.686-4.686 12.284-4.686 16.971 0l39.597 39.598zm-56.568-260.216c4.686 4.686 12.284 4.686 16.971 0l44.674-44.674c28.072-28.075 73.75-28.073 101.824 0 28.072 28.073 28.072 73.75 0 101.823l-44.675 44.674c-4.686 4.686-4.686 12.284 0 16.971l39.598 39.598c4.686 4.686 12.284 4.686 16.971 0l44.675-44.675c59.265-59.265 59.265-155.695 0-214.96-59.266-59.264-155.695-59.264-214.961 0l-44.674 44.674c-4.686 4.686-4.686 12.284 0 16.971l39.597 39.598zm234.828 359.28l22.627-22.627c9.373-9.373 9.373-24.569 0-33.941L63.598 7.029c-9.373-9.373-24.569-9.373-33.941 0L7.029 29.657c-9.373 9.373-9.373 24.569 0 33.941l441.373 441.373c9.373 9.372 24.569 9.372 33.941 0z);
    background-position:50% 50%;
    background-repeat:no-repeat;
    background-size:0.8em;
    padding:0;
    size:2em;
   }


  :root > form > button:disabled { fill:#ccc; } 

  :root > form > button(local-links-switch) { 
    display:block;
    width:*;
  }

  :root:expanded select(local-links) { 
    visibility:visible; 
  }

  select(local-links)
  { 
    visibility:none; 

    display:block;
    flow: table;
    
    height:max-content; 
    height:12em;
    width:*;
    
    padding:0; 
    border-collapse:collapse;
    //border:1dip solid grey;
    overflow:none;
  }

  select(local-links) > tbody {
    size:*;
    overflow-y: scroll-indicator;
  }

  select(local-links) thead th { padding:0 0.5em; border:1dip solid #ccc; background-color:color(paper-color-dimmed); }

  select(local-links) option { flow:table-row; padding:0; }
  select(local-links) option span { padding:0 0.5em; border:1dip solid #ccc; display:table-cell; }
  select(local-links) option span.path
  { 
    width:*;
    overflow-x:hidden;
    white-space: nowrap;
    max-width:20em;
    text-overflow:path-ellipsis;
  } 
  select(local-links) option span.text
  { 
    width:*;
    overflow-x:hidden;
    white-space: nowrap;
    max-width:20em;
    text-overflow:ellipsis;
  } 
  select(local-links) option span.text:empty { content:"{here}" }
}

popup#hyperlink { style-set: hyperlink-editor; }

@set table-generator-menu 
{
  :root {
    prototype: TableGenerator url(widgets.tis); 
    background:color(paper-color); 
    border:1dip solid color(splitter-color);
    padding:0.25em; 
    margin:0;
    display:none;
  }

  table { border-spacing:-1dip; padding:0; }
  table > tbody { width:160dip; height:100dip; }
  table > tbody > tr { height:*; }
  table > tbody > tr > td { behavior:clickable; size:*; border:1dip solid #ccc; }
  table > tbody > tr > td.header { background:color(paper-color-highlight); }  
  table > tbody > tr > td[selected] { foreground:color(selection-highlight-color); }
  table > tbody > tr > td:hover { background:color(accent); }
  //table > tbody > tr > td:active { background-image:url(); }
  header { behavior:form; border-spacing:0.25em; flow:horizontal; border:none; background:none; }
  header label { line-height:2em; }
  header input { vertical-align:middle; }
  header input > caption { padding:0 4dip 0 4dip; }

  div.table {
    width:max-content;
    height:max-content;
    flow: grid(0 1,
               2 3);
  }
  div.table > input(hcols) { display:block; width:*; padding:5dip; height:2dip; }
  div.table > input(hrows) { display:block; height:*; padding:5dip; width:2dip;}
  div.table > table { margin:5dip; display:inline-block; flow:table; }

  div.table > input > button {
    size:12dip;
    margin:*;
    background:#aaa;
    border:none;
    border-radius:0;
  }

  div.table > input:active > button,
  div.table > input > button:hover {
    background-color:color(accent);
  }

  div.table > input(hrows) > button {
    width:12dip;
    height:6dip;
  }

  div.table > input(hcols) > button {
    width:6dip;
    height:12dip;
  }

}

menu#table-generator-menu { style-set: table-generator-menu; }

@set table-cells-menu {
  :root {

    aspect: Callout(bordercolor:#bbb, 
                    shadowcolor:rgba(0,0,0,0.6),
                    shadowblur:2dip,
                    shadowx:1dip,
                    shadowy:2dip,
                    backcolor:#FFF8DC,
                    orientation:"at-right") url(widgets.tis);

    prototype: TableCells url(widgets.tis);
    size:max-content;
    margin:0.5em;
    background: transparent;
    padding:20dip;  // to accomodate blur
    margin-left:-10dip; // related to padding above
  }

  div {padding:4dip;}

  toolbar {
    background-color: transparent; 
  }

  toolbar.cell {
    horizontal-align:center;
  }

  button {
    size:20dip;
    foreground-repeat: no-repeat;
    foreground-size:24dip;
    foreground-position:50% 50%;
    fill:color(icon-color);
    stroke:none;
    margin:2dip;
  }

  
  //button.insert-col-after { foreground-image: url(path:M0 3v14h8v1h12V2H8v1H0zm10 6h3V6h2v3h3v2h-3v3h-2v-3h-3zM6 5h2v10H6zM2 5h2v10H2z); }
  


  button.insert-col-after { foreground-image: url(images/insert-column-after.svg); }
  button.insert-col-before { foreground-image: url(images/insert-column-before.svg); }
  button.delete-col { foreground-image: url(images/delete-column.svg); }

  button.insert-row-after { foreground-image: url(images/insert-row-after.svg); }
  button.insert-row-before { foreground-image: url(images/insert-row-before.svg); }
  button.delete-row { foreground-image: url(images/delete-row.svg); }

  button.merge-cells { foreground-image: url(images/merge-cells.svg); }
  button.split-cells { foreground-image: url(images/split-cells.svg); }

  button:disabled {opacity:0.5; }

  button.insert-row-before 
  { 
    foreground-image: url(path:M 1,26 C 0.4,26 0,25.6 0,25 V 13 c 0,-0.6 0.4,-1 1,-1 h 3.40625 c 0.2,0.7 0.3875,1.4 0.6875,2 H 2 V 24 H 24 V 14 H 20.8125 C 21.1125,13.4 21.4,12.7 21.5,12 H 25 c 0.6,0 1,0.4 1,1 v 12 c 0,0.6 -0.4,1 -1,1 z M 13,16.78125 C 9.2,16.78125 6.1875,13.7 6.1875,10 6.1875,6.3 9.2,3.1875 13,3.1875 16.8,3.1875 19.8125,6.3 19.8125,10 19.8125,13.7 16.8,16.78125 13,16.78125 Z M 12,14 h 2 v -3 h 3 V 9 H 14 V 6 H 12 V 9 H 9 v 2 h 3 z);
    foreground-size:20dip 18dip;
  }

  button.insert-row-after 
  { 
    foreground-image: url(path:M 1 3.1875 C 0.4 3.1875 0 3.5875 0 4.1875 L 0 16.1875 C 0 16.7875 0.4 17.1875 1 17.1875 L 4.40625 17.1875 C 4.60625 16.4875 4.79375 15.7875 5.09375 15.1875 L 2 15.1875 L 2 5.1875 L 24 5.1875 L 24 15.1875 L 20.8125 15.1875 C 21.1125 15.7875 21.4 16.4875 21.5 17.1875 L 25 17.1875 C 25.6 17.1875 26 16.7875 26 16.1875 L 26 4.1875 C 26 3.5875 25.6 3.1875 25 3.1875 L 1 3.1875 z M 13 12.40625 C 9.2 12.40625 6.1875 15.4875 6.1875 19.1875 C 6.1875 22.8875 9.2 26 13 26 C 16.8 26 19.8125 22.8875 19.8125 19.1875 C 19.8125 15.4875 16.8 12.40625 13 12.40625 z M 12 15.1875 L 14 15.1875 L 14 18.1875 L 17 18.1875 L 17 20.1875 L 14 20.1875 L 14 23.1875 L 12 23.1875 L 12 20.1875 L 9 20.1875 L 9 18.1875 L 12 18.1875 L 12 15.1875 z);
    foreground-size:20dip 18dip;
  }

  button.insert-col-after 
  { 
    foreground-image: url(path:M 4.1875 0 C 3.5875 0 3.1875 0.4 3.1875 1 L 3.1875 25 C 3.1875 25.6 3.5875 26 4.1875 26 L 16.1875 26 C 16.7875 26 17.1875 25.6 17.1875 25 L 17.1875 21.59375 C 16.4875 21.39375 15.7875 21.2125 15.1875 20.8125 L 15.1875 24 L 5.1875 24 L 5.1875 2 L 15.1875 2 L 15.1875 5.1875 C 15.7875 4.8875 16.4875 4.6 17.1875 4.5 L 17.1875 1 C 17.1875 0.4 16.7875 0 16.1875 0 L 4.1875 0 z M 19.1875 6.1875 C 15.3875 6.1875 12.40625 9.2 12.40625 13 C 12.40625 16.8 15.4875 19.8125 19.1875 19.8125 C 22.8875 19.8125 26 16.7 26 13 C 26 9.3 22.9875 6.1875 19.1875 6.1875 z M 18.1875 9 L 20.1875 9 L 20.1875 12 L 23.1875 12 L 23.1875 14 L 20.1875 14 L 20.1875 17 L 18.1875 17 L 18.1875 14 L 15.1875 14 L 15.1875 12 L 18.1875 12 L 18.1875 9 z);
    foreground-size:18dip 20dip;
  }

  button.insert-col-before 
  { 
    foreground-image: url(path:m 25,0 c 0.6,0 1,0.4 1,1 v 24 c 0,0.6 -0.4,1 -1,1 H 13 c -0.6,0 -1,-0.4 -1,-1 v -3.40625 c 0.7,-0.2 1.4,-0.38125 2,-0.78125 V 24 H 24 V 2 H 14 V 5.1875 C 13.4,4.8875 12.7,4.6 12,4.5 V 1 C 12,0.4 12.4,0 13,0 Z M 10,6.1875 C 13.8,6.1875 16.78125,9.2 16.78125,13 16.78125,16.8 13.7,19.8125 10,19.8125 6.3,19.8125 3.1875,16.7 3.1875,13 3.1875,9.3 6.2,6.1875 10,6.1875 Z M 11,9 H 9 v 3 H 6 v 2 h 3 v 3 h 2 v -3 h 3 v -2 h -3 z);
    foreground-size:18dip 20dip;
  }

  button.delete-col { 
    foreground-image: url(path:m 4.1875,0 c -0.5,0 -1,0.4 -1,1 v 24 c 0,0.6 0.4,1 1,1 h 12 c 0.6,0 1,-0.4 1,-1 v -3.40625 c -0.7,-0.2 -1.4,-0.3875 -2,-0.6875 V 24 h -10 V 2 h 10 v 3.1875 c 0.6,-0.3 1.3,-0.5875 2,-0.6875 V 1 c 0,-0.6 -0.4,-1 -1,-1 z m 15,6.1875 c -3.8,0 -6.78125,3.1125 -6.78125,6.8125 0,3.8 3.08125,6.8125 6.78125,6.8125 C 22.8875,19.8125 26,16.7 26,13 26,9.3 22.9875,6.1875 19.1875,6.1875 Z M 15.5,12 h 7.3125 v 2 H 15.5 Z); 
    foreground-size:18dip 20dip;    
  }

  button.delete-row { 
    foreground-image: url(path:M 1 3.1875 C 0.4 3.1875 0 3.5875 0 4.1875 L 0 16.1875 C 0 16.7875 0.4 17.1875 1 17.1875 L 4.40625 17.1875 C 4.60625 16.4875 4.79375 15.7875 5.09375 15.1875 L 2 15.1875 L 2 5.1875 L 24 5.1875 L 24 15.1875 L 20.8125 15.1875 C 21.1125 15.7875 21.4 16.4875 21.5 17.1875 L 25 17.1875 C 25.6 17.1875 26 16.7875 26 16.1875 L 26 4.1875 C 26 3.5875 25.6 3.1875 25 3.1875 L 1 3.1875 z M 13 12.40625 C 9.2 12.40625 6.1875 15.4875 6.1875 19.1875 C 6.1875 22.8875 9.2 26 13 26 C 16.8 26 19.8125 22.8875 19.8125 19.1875 C 19.8125 15.4875 16.8 12.40625 13 12.40625 z M 9.40625 18.1875 L 16.6875 18.1875 L 16.6875 20.1875 L 16.59375 20.1875 L 9.40625 20.1875 L 9.40625 18.1875 z); 
    foreground-size:20dip 18dip;    
  }
  
  button.merge-cells { 
    foreground-image: url(path:m 14,18 h 10 v 6 H 14 Z M 2,18 h 10 v 6 H 2 Z M 2,1.9576271 H 24.118644 V 16 H 2 Z M 12.90625,-0.03125 A 1,1 0 0 0 12.78125,0 H 1 A 1,1 0 0 0 0.90625,0 1,1 0 0 0 0,1 v 7.6875 a 1.001098,1.001098 0 0 0 0,0.59375 v 7.40625 a 1.001098,1.001098 0 0 0 0,0.59375 V 25 a 1,1 0 0 0 1,1 h 24 a 1,1 0 0 0 1,-1 v -7.8125 a 1,1 0 0 0 0,-0.40625 V 9.1875 A 1,1 0 0 0 26,8.78125 V 1 A 1,1 0 0 0 25,0 H 13.1875 a 1,1 0 0 0 -0.28125,-0.03125 z); 
    foreground-size:20dip 22dip;        
  }

  button.split-cells { 
    foreground-image: url(path:M 12.90625 -0.03125 A 1 1 0 0 0 12.78125 0 L 1 0 A 1 1 0 0 0 0.90625 0 A 1 1 0 0 0 0 1 L 0 8.6875 A 1.001098 1.001098 0 0 0 0 9.28125 L 0 16.6875 A 1.001098 1.001098 0 0 0 0 17.28125 L 0 25 A 1 1 0 0 0 1 26 L 25 26 A 1 1 0 0 0 26 25 L 26 17.1875 A 1 1 0 0 0 26 16.78125 L 26 9.1875 A 1 1 0 0 0 26 8.78125 L 26 1 A 1 1 0 0 0 25 0 L 13.1875 0 A 1 1 0 0 0 12.90625 -0.03125 z M 2 2 L 12 2 L 12 8 L 2 8 L 2 2 z M 14 2 L 24 2 L 24 8 L 14 8 L 14 2 z M 2 10 L 12 10 L 12 16 L 2 16 L 2 10 z M 14 10 L 24 10 L 24 16 L 14 16 L 14 10 z M 2 18 L 12 18 L 12 24 L 2 24 L 2 18 z M 14 18 L 24 18 L 24 24 L 14 24 L 14 18 z); 
    foreground-size:20dip 22dip;        
  }




}

popup#table-cells { style-set: table-cells-menu; }
